import { colors } from "@/data/shared/colors";

type Coords = { x: number; y: number };

export type DynamicTileMenuKeys = `d${1 | 2 | 3 | 4 | 5}`;
export type StaticTileMenuKeys = `s${1 | 2 | 3 | 4 | 5 | 6}`;
export type BackgroundTileMenuKeys = `b${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}`;
export interface PolygonBaseShape {
  polygon: Coords[];
  top: number;
  left: number;
  width: number;
  height: number;
}

// Node layout can be found in https://www.figma.com/file/skg8zMbRJbb2XLNDBMSqH1/LOCAL_L'E%CC%81COLE-2022-09-29?node-id=58%3A48423
// Node collection to easier move 1px without breaking overlap
const NODES = {
  n1: { x: 179, y: 254 },
  n2: { x: 375, y: 254 },
  n3: { x: 375, y: 390 },
  n4: { x: 179, y: 756 },
  n5: { x: 44, y: 504 },
  n6: { x: 0, y: 0 },
  n7: { x: 322, y: 0 },
  n8: { x: 0, y: 421 },
  n9: { x: 0, y: 756 },
  n10: { x: 314, y: 1006 },
  n11: { x: 180, y: 1257 },
  n12: { x: 0, y: 923 },
  n13: { x: 375, y: 1131 },
  n14: { x: 375, y: 1398 },
  n15: { x: 315, y: 1508 },
  n16: { x: 0, y: 1257 },
  n17: { x: 254, y: 1619 },
  n18: { x: 105, y: 1619 },
  n19: { x: 0, y: 1425 },
  n20: { x: 375, y: 114 },
  n21: { x: 375, y: 0 },
  n22: { x: 0, y: 587 },
  n23: { x: 311, y: 510 },
  n24: { x: 375, y: 627 },
  n25: { x: 375, y: 756 },
  n26: { x: 375, y: 894 },
  n27: { x: 45, y: 1006 },
  n28: { x: 0, y: 1089 },
  n29: { x: 375, y: 1619 },
  n30: { x: 52, y: 1522 },
  n31: { x: 0, y: 1619 },
};

export const DYNAMIC_EL_LAYOUT: {
  [key in DynamicTileMenuKeys]: PolygonBaseShape;
} = {
  d2: {
    polygon: [NODES.n1, NODES.n2, NODES.n3, NODES.n4, NODES.n5],
    top: 254,
    left: 44,
    width: 331,
    height: 502,
  },
  d1: {
    polygon: [NODES.n6, NODES.n7, NODES.n5, NODES.n8],
    top: 0,
    left: 0,
    width: 322,
    height: 504,
  },
  d3: {
    polygon: [NODES.n9, NODES.n4, NODES.n10, NODES.n11, NODES.n12],
    top: 756,
    left: 0,
    width: 314,
    height: 501,
  },
  d4: {
    polygon: [NODES.n10, NODES.n13, NODES.n14, NODES.n15, NODES.n11],
    top: 1006,
    left: 180,
    width: 195,
    height: 502,
  },
  d5: {
    polygon: [NODES.n16, NODES.n11, NODES.n15, NODES.n17, NODES.n18, NODES.n19],
    top: 1257,
    left: 0,
    width: 315,
    height: 362,
  },
};

export const STATIC_EL_LAYOUT: {
  [key in StaticTileMenuKeys]: PolygonBaseShape;
} = {
  s1: {
    polygon: [
      NODES.n7,
      NODES.n20,
      // NODES.n2,
      { x: NODES.n2.x, y: NODES.n2.y + 2 },
      // NODES.n1,
      { x: NODES.n1.x, y: NODES.n1.y + 2 },
    ],
    top: 0,
    left: 179,
    width: 196,
    height: 254,
  },
  s2: {
    polygon: [NODES.n22, NODES.n5, NODES.n4, NODES.n9],
    top: 504,
    left: 0,
    width: 179,
    height: 253,
  },
  s3: {
    polygon: [NODES.n23, NODES.n24, NODES.n25, NODES.n4],
    top: 510,
    left: 179,
    width: 196,
    height: 246,
  },
  s4: {
    polygon: [NODES.n4, NODES.n25, NODES.n26, NODES.n10],
    top: 756,
    left: 179,
    width: 196,
    height: 250,
  },
  s5: {
    polygon: [NODES.n27, NODES.n11, NODES.n16, NODES.n28],
    top: 1006,
    left: 0,
    width: 180,
    height: 251,
  },
  s6: {
    polygon: [NODES.n15, NODES.n29, NODES.n17],
    top: 1508,
    left: 254,
    width: 121,
    height: 111,
  },
};

export const BACKGROUND_EL_LAYOUT: {
  [key in BackgroundTileMenuKeys]: PolygonBaseShape & { isCut?: boolean };
} = {
  b1: {
    polygon: [NODES.n7, NODES.n21, NODES.n20],
    top: 0,
    left: 322,
    width: 53,
    height: 114,
  },
  b2: {
    polygon: [NODES.n8, NODES.n5, NODES.n22],
    top: 421,
    left: 0,
    width: 44,
    height: 166,
  },
  b3: {
    polygon: [NODES.n3, NODES.n24, NODES.n23],
    top: 390,
    left: 311,
    width: 64,
    height: 237,
  },
  b4: {
    polygon: [NODES.n12, NODES.n27, NODES.n28],
    top: 923,
    left: 0,
    width: 45,
    height: 166,
  },
  b5: {
    polygon: [NODES.n26, NODES.n13, NODES.n10],
    top: 894,
    left: 314,
    width: 61,
    height: 237,
  },
  b6: {
    polygon: [NODES.n19, NODES.n30, NODES.n31],
    top: 1425,
    left: 0,
    width: 52,
    height: 194,
  },
  b7: {
    polygon: [NODES.n14, NODES.n29, NODES.n15],
    top: 1398,
    left: 315,
    width: 60,
    height: 221,
  },
  b8: {
    polygon: [NODES.n30, NODES.n18, NODES.n31],
    top: 1522,
    left: 0,
    width: 105,
    height: 97,
    isCut: true,
  },
};

export const BACKGROUND_COLORS: { [key in BackgroundTileMenuKeys]: string } = {
  b1: colors.colorViking,
  b2: "#D2D1CD",
  b3: colors.colorHistory,
  b4: colors.colorHistory,
  b5: colors.colorSavoir,
  b6: colors.colorViking,
  b7: colors.colorHistory,
  b8: colors.colorSavoir,
};
